/* --- VARIABLES --- */
:root {
    --bg-dark: #323232;
    --bg-card: #3a3a3a;
    --bg-input: #2b2b2b;
    --text-light: #e4e7e7;
    --text-muted: #a0a0a0;
    --primary: #3498db;
    --border: #505050;
    
    /* Zones */
    --z1: #27ae60; --z2: #2ecc71; --z3: #f1c40f; --z4: #e67e22; --z5: #e74c3c;
}

/* --- BASE --- */
.rundrm-wrapper {
    font-family: 'Poppins', sans-serif;
    color: var(--text-light);
    max-width: 900px;
    margin: 0 auto;
}

h2, h3, h4 { color: #ffffff; font-weight: 600; letter-spacing: 0.5px; }
p, label, span, div { font-family: 'Poppins', sans-serif; } 

/* --- WIZARD UI --- */
.rundrm-card {
    background: var(--bg-card);
    padding: 2.5rem;
    border-radius: 0px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.wizard-header h2 { text-align: center; margin-bottom: 1.5rem; }
.progress-bar-container { background: var(--bg-input); height: 6px; border-radius: 3px; margin-bottom: 2rem; }
.progress-bar { background: var(--primary); height: 100%; width: 25%; transition: width 0.4s ease; }
.step-indicators { display: flex; justify-content: space-between; width: 200px; margin: 0 auto 30px; }
.step-dot { width: 32px; height: 32px; background: #555; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.step-dot.active { background: var(--primary); color: white; }

.form-step { display: none; animation: fadeIn 0.4s ease; }
.form-step.active { display: block; }
@keyframes fadeIn { from {opacity:0; transform:translateY(5px);} to {opacity:1; transform:translateY(0);} }

.step-intro { color: var(--text-muted); margin-bottom: 25px; font-size: 1rem; line-height: 1.5; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.form-group { margin-bottom: 25px; }
.form-group label { display: block; margin-bottom: 10px; color: #fff; font-size: 0.95rem; font-weight: 500; }
.helper-text { font-size: 0.8rem; color: var(--text-muted); margin-top: 5px; display: block; }

.rundrm-form input, .rundrm-form textarea, .rundrm-form select {
    width: 100%; padding: 14px; background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 8px; color: #fff; box-sizing: border-box; font-family: 'Poppins', sans-serif; font-size: 1rem;
}
.rundrm-form input:focus { border-color: var(--primary); outline: none; }

/* --- BUTTON RADIO CARDS --- */
.radio-cards-simple { display: grid; gap: 12px; }
.radio-cards-simple.col-2 { grid-template-columns: 1fr 1fr; }
.radio-cards-simple.col-1 { grid-template-columns: 1fr; }
.radio-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.radio-card { position: relative; cursor: pointer; }
.radio-card input { position: absolute; opacity: 0; }

.card-content-simple {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px;
    padding: 15px; transition: 0.2s; text-align: center; min-height: 50px;
}
.card-content-simple strong { display: block; font-size: 1.1rem; color: #fff; }
.sub-text { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }

.card-content { /* Distance cards */
    display: flex; flex-direction: column; align-items: center; justify-content: center; height: 70px;
    background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; transition: 0.2s;
}

.radio-card input:checked + .card-content-simple,
.radio-card input:checked + .card-content {
    background: rgba(52,152,219,0.2); border-color: var(--primary);
}
.radio-card input:checked + .card-content-simple strong,
.radio-card input:checked + .card-content .card-title { color: var(--primary); }

/* --- CHECKBOX ALIGNMENT --- */
.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 15px;
}
.checkbox-group input {
    margin-top: 4px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}
.checkbox-group label {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-muted);
    cursor: pointer;
}

/* --- NAV BUTTONS --- */
.step-actions { margin-top: 30px; display: flex; justify-content: space-between; }
.step-actions.right { justify-content: flex-end; }
.btn-next, .rundrm-submit-btn { background: var(--primary); color: white; padding: 14px 30px; border:none; border-radius:8px; font-weight:600; cursor:pointer; font-size: 1rem; }
.btn-prev { background: transparent; border: 1px solid var(--border); color: #fff; padding: 12px 25px; border-radius:8px; cursor:pointer; }
.btn-print { background: var(--z1); color: white; padding: 12px 20px; border:none; border-radius:6px; cursor:pointer; font-weight:500; }
.btn-reset { background: transparent; border: 1px solid #777; color: #bbb; padding: 12px 20px; border-radius:6px; cursor:pointer; margin-left: 10px; }

/* --- DASHBOARD --- */
.rundrm-dashboard { background: var(--bg-card); padding: 2.5rem; border-radius: 12px; }
.dashboard-hero { border-bottom: 1px solid var(--border); padding-bottom: 2rem; margin-bottom: 2rem; text-align: center; }
.hero-stats { display: flex; justify-content: space-around; margin-top: 1.5rem; }
.stat-label { font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); display: block; }
.stat-value { font-size: 2rem; font-weight: 700; color: var(--primary); display: block; }
.stat-expl { font-size: 0.8rem; color: #888; display: block; margin-top: 5px; }

/* Zones */
.zones-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 40px; }
.zone-box { background: var(--bg-input); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); display: flex; flex-direction: column; }
.zone-header { padding: 15px; color: white; display: flex; flex-direction: column; gap: 5px; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.1); }
.zone-1 .zone-header { background: var(--z1); }
.zone-2 .zone-header { background: var(--z2); }
.zone-3 .zone-header { background: var(--z3); }
.zone-4 .zone-header { background: var(--z4); }
.zone-5 .zone-header { background: var(--z5); }
.z-name { font-weight: 700; font-size: 1.1rem; display: block; }
.z-sub { font-size: 0.85rem; opacity: 0.9; display: block; margin-bottom: 5px; }
.z-pct { font-size: 0.8rem; background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; display: inline-block; margin: 0 auto; width: fit-content; }
.zone-body { padding: 15px; font-size: 0.9rem; flex-grow: 1; }
.zone-metric { margin-bottom: 8px; color: #ddd; display: flex; justify-content: space-between; border-bottom: 1px solid #3a3a3a; padding-bottom: 4px; }
.zone-metric strong { color: #fff; }
.zone-purpose { font-style: italic; color: var(--text-muted); margin-top: 15px; font-size: 0.8rem; line-height: 1.4; }

/* Controls */
.accordion-controls { margin-bottom: 15px; display: flex; gap: 10px; }
.ctrl-btn { background: #555; border: none; color: white; padding: 5px 12px; border-radius: 4px; cursor: pointer; font-size: 0.8rem; }
.ctrl-btn:hover { background: #666; }

/* Accordion */
.week-item { background: #252525; border-radius: 8px; margin-bottom: 12px; overflow: hidden; border: 1px solid #444; }
.week-item[open] { background: #404040; border-color: var(--primary); }
.week-summary { padding: 15px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; list-style: none; font-weight: 500; }
.week-summary::-webkit-details-marker { display: none; }
.week-left, .week-right { display: flex; align-items: center; gap: 12px; }
.week-num { color: var(--primary); font-weight: 700; }
.badge-rec { background: rgba(46, 204, 113, 0.2); color: #2ecc71; font-size: 0.7rem; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; white-space: nowrap; }
.accordion-icon { transition: transform 0.3s ease; color: var(--text-muted); font-size: 0.8rem; }
.week-item[open] .accordion-icon { transform: rotate(180deg); color: #fff; }

.session-row { padding: 15px 20px; border-bottom: 1px solid #555; }
.session-row:last-child { border-bottom: none; }
.session-meta { display: flex; gap: 10px; margin-bottom: 5px; align-items: center; }
.s-type { font-weight: 600; color: #fff; font-size: 0.95rem; }
.s-zone { padding: 2px 6px; border-radius: 4px; color: #fff; font-size: 0.7rem; font-weight: 600; }
.badge-sone1 { background: var(--z1); } .badge-sone2 { background: var(--z2); } .badge-sone3 { background: var(--z3); } .badge-sone4 { background: var(--z4); }
.session-data { display: flex; gap: 15px; flex-wrap: wrap; font-size: 0.85rem; color: #ccc; margin-bottom: 8px; }
.s-item { background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 4px; }
.s-struct { background: #222; padding: 8px 12px; border-left: 3px solid var(--primary); color: #ddd; font-family: monospace; font-size: 0.85rem; margin-bottom: 5px; }
.s-note { font-style: italic; color: var(--text-muted); margin: 0; font-size: 0.85rem; }

/* Input Summary */
.input-summary { margin-top: 30px; padding: 20px; background: rgba(0,0,0,0.2); border-radius: 8px; text-align: center; border: 1px dashed #555; }
.input-summary h4 { margin-top: 0; font-size: 1rem; color: #fff; margin-bottom: 5px; }
.input-summary p { font-size: 0.85rem; color: #aaa; margin: 0; }
.input-summary strong { color: var(--primary); font-weight: 600; }

.actions-footer { display: flex; gap: 15px; justify-content: center; margin-bottom: 30px; margin-top: 30px; }

/* --- MOBILE RESPONSIVE TWEAKS --- */
@media (max-width: 600px) {
    /* 1. General Mobile Padding */
    .rundrm-card, .rundrm-dashboard { padding: 1.5rem; }

    /* 2. Form Grid single col */
    .form-grid { grid-template-columns: 1fr; }
    .radio-cards { grid-template-columns: 1fr 1fr; }
    .radio-cards-simple.col-2 { grid-template-columns: 1fr; }

    /* 3. Hero Text Size (Fixing crammed blue text) */
    .stat-value { font-size: 1.5rem; }
    .hero-stats { gap: 10px; }

    /* 4. Accordion Header (Fixing messy text) */
    .week-summary {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        align-items: start;
    }
    .week-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .badge-rec {
        margin-top: 4px;
        align-self: flex-start;
    }
    .week-right {
        align-items: flex-start;
        padding-top: 2px;
    }

    /* 5. Footer Buttons (Fixing messy buttons) */
    .actions-footer {
        flex-direction: column;
        gap: 10px;
    }
    .btn-print, .btn-reset {
        width: 100%;
        margin-left: 0;
        text-align: center;
        padding: 14px;
    }
}

/* Print */
@media print {
    body * { visibility: hidden; }
    .rundrm-dashboard, .rundrm-dashboard * { visibility: visible; }
    .rundrm-dashboard { position: absolute; left: 0; top: 0; width: 100%; background: #fff !important; color: #000 !important; box-shadow: none; padding: 0; }
    h2, h3, h4, strong, .s-type { color: #000 !important; }
    p, span, div, .s-note { color: #333 !important; }
    .zone-box { background: #fff !important; border: 1px solid #000 !important; page-break-inside: avoid; }
    .zone-header { background: #eee !important; color: #000 !important; border-bottom: 1px solid #000; }
    details, .week-content { display: block !important; height: auto !important; }
    .week-item { border: 1px solid #000 !important; background: #fff !important; margin-bottom: 10px; page-break-inside: avoid; }
    .week-summary { background: #f0f0f0 !important; border-bottom: 1px solid #000 !important; }
    .accordion-controls, .actions-footer { display: none !important; }
}